<template>
  <div class="main">
    <div class="container">
      <div class="wuliu">
        <!-- 面包屑 -->

        <!-- 图片 -->
        <img src="../assets/logistics/pic_bg_zhuanyun.png" alt="" />
        <div class="area">
          <!-- area红色框提示 -->
          <ul class="warning">
            <li>
              在大陆购物网站下单付款后在KoKo 提交国际快递
              （转运），并将商品寄送至KoKo
              1号仓，我们即可为您验货和发起国际运送。
            </li>
            <li>
              为了便于完成国际运送，请先确保您的KoKo
              账户有足够余额用于支付相关费用。余额不足？立即充值
            </li>
            <li>支付宝没钱付款？让KoKo代充值，查看代充值记录</li>
          </ul>
          <!-- 步骤条 -->
          <div class="bar" style="margin-top: 35px; margin-bottom: 64px">
            <el-steps :active="0" align-center>
              <el-step title="购买商品"></el-step>
              <el-step title="提交国际快递（转运）" status=""></el-step>
              <el-step title="KoKo验收"></el-step>
              <el-step title="国际运送"></el-step>
              <el-step title="确认收货"></el-step>
            </el-steps>
          </div>
          <!-- 提交框 -->
          <div class="subBox">
            <h2>欢迎使用KoKo转运</h2>
            <el-input
              v-model="search"
              class="search"
              size="medium"
              placeholder="请将您在其他网站购买商品的详细链接粘贴到这里"
            >
              <!-- 插入数据按钮  -->
              <el-button slot="append" style="">添加商品</el-button>
            </el-input>
            <el-table
              :data="
                tableData.filter(
                  (data) =>
                    !search ||
                    data.name.toLowerCase().includes(search.toLowerCase())
                )
              "
              style="width: 100%"
              id="table"
            >
              <el-table-column>
                <template slot="header"> </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >Edit</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="Date" prop="date"> </el-table-column>
              <el-table-column label="Name" prop="name"> </el-table-column>
              <div slot="empty" style="text-align: left">
                <el-empty
                  description="暂无商品"
                  image="https://s1.KoKo.com/transports/static/icon_goods_none.png"
                  :image-size="44"
                  style="margin-top: 70px"
                />
              </div>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      tableData: [],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted () {
    // 点击后页面到顶部
        window.scrollTo(0,0)
  },
};
</script>

<style lang="scss"  >
* {
  margin: 0;
  padding: 0;
}
// 版心设置
.main {
  background-color: #f5f5f5;
  .container {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
    color: #333;
  }
}
.area {
  // 提示
  padding: 20px 20px 40px;
  background: #fff;
  .warning {
    background-color: #ffe9e9;
    font-size: 13px;
    padding: 18px;
    color: #666;
  }
  .bar {
    position: relative;
    width: 750px;
    margin: 0 auto;
    .el-step__title {
      font-family: MicrosoftYaHei-Bold;
      font-weight: 700;
      font-size: 14px;
      padding-top: 13px;

      color: #999;
    }

    .is-process {
      color: #ff6e6e;
      .el-step__icon.is-text {
        border-radius: 50%;
        border: 2px solid;
        border-color: #ff6e6e;
        background-color: #ff6e6e;
      }
      .el-step__icon-inner {
        color: white;
      }
    }
  }
}
// subBox
.subBox {
  width: 880px;
  margin: 0 auto;
  h2 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
  }
}
// 搜索框
.subBox .search {
  width: 880px;
  height: 60px;

  input {
    height: 60px;
    border: 1px solid #ddd;
    padding-left: 20px;
    padding-right: 45px;
    font-size: 14px;
    box-sizing: border-box;
  }
}
</style>